.btn{}

@bodyWidth : 980px;
@baseColor:#ff4400;
@baseColorHover:#f52b00;
@baseLightColor:#fff1e2;
@baseGray:#222;
@baseBg:#e7e7e7;

.my-btn{
	border: 1px solid #ccc;
	border-bottom-color: #B4B4B4;
	-webkit-border-radius: 2px;
	letter-spacing:.1em;
	text-align:center;
	height: 30px;
	line-height: 30px;
	.verticalityGradient(#FEFEFE, #D6D6D6);
	font-size:.9em;
	margin:5px;
	cursor: pointer;
	color:black;
	/*可以用来给文字添加描边*/ 
	/*
	-webkit-text-stroke: 1px rgba(255,255,255,0.5);
	*/
	&:hover{
		color:gray;
		background: -webkit-gradient(linear,0 0,0 100%,from(#D6D6D6),to(#FEFEFE));	
	}
}
 
// 折叠菜单 Accordion Menu
.acMenu{
	&>li h3{
		cursor: pointer;
	}
	.pressed{
		&>ul{
			// height: auto;
			// height:100px; // 如果要使用动画效果，不能使用 auto，必须精确指定 px 高度。
			
		}
		& h3{
			// @overable
			color: black;
		}
	}
	&>li>ul{	
		.trans(height .5s ease);
		
		overflow: hidden;
		
	}
	ul{height: 0;
		
	}
}

// 对话框
.dialog(@width:400px, @height:auto){
	@zindex:999;
	.box{
		width: @width;
		height: @height;
		background-color: #EBEBEB;
		border:1px solid #D3D3D3;
		position: fixed;
		z-index: @zindex + 1;
		padding: 5px;
		padding-top: 0;
		.boxshadow;

		// 标题
		&>h1{ 
			font-size: 10.5pt;
			text-align: center;
			line-height: normal;
			font-weight: normal;
			margin: 0;
			padding: 5px;
			letter-spacing: 2px;
			cursor: move;
		}
		button{
			cursor: pointer;
		}
		button.rightTopIcon{
			position: absolute;
			right:2px;
			top:2px;
			padding:0 3px;
			background: 0;
			border: 0;
			&:hover{
				color:black;
			}

		}

		.innerPanel{
			// height: 90%;
			border:1px solid #DADADA;
			padding: 5px;
			box-sizing: border-box;
			// margin-top: 30px;
			background-color: #f5f5f5;
			position: relative;
			.loadingIndicator>img{
				position: absolute;
				top: 50%;
			}
		}

		// 标准按钮
		.stdBtn{
			border: 1px solid lightgray;
			background-color:#f5f5f5; 
			padding:0 3px;
			font-size: 9pt;
			color:gray;
			&:hover{
				color:black;
				border-color:gray;
				background-color: draken(#f5f5f5, 10%);
			}
		}
		.bottomBtns{
			text-align: center;
			padding: 5px;
			button{
				.stdBtn;
				padding: 2px 15px;
			}
		}
	}
	.mask{
		.fullScreen_Mask;
		z-index: @zindex;
	}
	.middleBtn{
		margin: 10px auto;
		display: block;
		position: static!important;
		padding: 3px 15px!important;
		// border:0!important;
		.btn;
	}
}

.simpleDialog{
	.dialog(350px, 150px);
	.innerPanel{
		height: 80px;
		table{
			height: 100%;
			td{
				vertical-align: middle;
			}
		}
	}
	// icons
	.okIcon, .errorIcon, .alertIcon{
		width: 64px;
		height: 60px;
		display: inline-block;
		margin-right: 10px;
		background-repeat: no-repeat;

	}
	.okIcon{
		.ok_Icon();
	}
	.errorIcon{
		background-image: url();
	}
	.alertIcon{
		.alertIcon;
	}
	.p{

		text-align: center;
		font-size: @middleFontSize;
		letter-spacing: 3px;
		// margin-left: 60px;
		height: 32px;
		line-height: 32px;
		vertical-align: top;
		.textshadow(1px, 1px, 1px, white);

	}
}

// 多选项卡（多标签页）
.tab{
	ul.hxl{
		width:20%;
		float: left;

		&>li{
			height: 35px;
			list-style: none;
			text-align: center;
			background-color: @baseBg;
			margin:3px 0;
			margin-top:0;
			padding: 8px 0;
			-moz-box-sizing : border-box; /*  边框不计算在宽度内 */
			box-sizing : 	  border-box;
			position: relative;
			cursor: pointer;
			&.selected{
				background-color: white;
				border: 1px solid @baseColor;
				border-right:0;
				z-index: 999999;
			}
			&:hover{
				color: @baseColor;
			}
		}
	}
	.content{
		// width:79.5%; for ie
		width:80%;
		
		float: left;
		border: 1px solid @baseColor;
		-moz-box-sizing : border-box; /*  边框不计算在宽度内 */
		box-sizing : 	  border-box;
	
		margin-left: -1px;
		z-index: 1;
		position: relative;

	}
}

// 水平 Tab
.tab2{
	&>ul{
		.giveHeight;
		&>li{
			display: block;
			float: left;
			list-style: none;
			text-align: center;
			background-color: @baseBg;
			margin:3px 0;
			margin-bottom:0;
			margin-right: 1px;
			padding: 8px;
	
			-moz-box-sizing : border-box; /*  边框不计算在宽度内 */
			box-sizing : 	  border-box;
			position: relative;
			cursor: pointer;
			&.selected{
				background-color: white;
				border: 1px solid @baseColor;
				border-bottom:0;
				z-index: 999999;
			}
			&:hover{
				color: @baseColor;
			}
		}
	}
	.content{
		// width:79.5%; for ie
		width:80%;
		// height: 230px;
		border: 1px solid @baseColor;
		-moz-box-sizing : border-box; /*  边框不计算在宽度内 */
		box-sizing : 	  border-box;
	
		margin-top: -1px;
		margin-left: 0;
		z-index: 1;
		position: relative;
	}	
}
 
 
/* .marquee{
	position: relative;
	.mask{
		position: absolute;
		top:0;
		left:0;
		height: 25px;
		width:100%;
		.verticalityGradient(white, rgba(255, 255, 255, 0));
	}
	.idScroller{
		height:150px; 
		overflow:hidden;
		
	}
} */

/* 图片容器 */
.imgContainer{
	position :      relative;
	overflow: hidden; /* 把图片溢出的部分隐藏 */
	
	/* 边框设计 */
	-moz-box-sizing : border-box; /*  边框不计算在宽度内 */
	box-sizing : 	  border-box;
	border :		  1px solid white; /* transparent */
	.boxshadow(1px, 1px, 1px, #888);
	
	/* 高亮效果时图片的边框 变化 */
	&:hover {
		border-color: lighten(@baseColor, 30%);
		h2{
			color: lighten(@baseColor, 30%);
			
		}
	}
	&:active {
		border-color: @baseColor;
		h2{
			color: @baseColor;
		}
	}
	/* 在图片上的文字 */
	h2 {
		width : 	  	100%;
		padding :	  	0 1px;
		margin: 0;	
		// text-indent : 	.3em;
		text-align :  	center;
		white-space : 	nowrap;
		text-overflow:	ellipsis;
		overflow : 	  	hidden;
		font-weight:	normal;
		position : 	  	absolute;
		bottom :	  	0;
		left : 		  	0;
		font-size: 12px;
		font-weight:normal;
		color: white;
		background-color:rgba(0, 0, 0, .5);
		height:20px;
		line-height:20px;	
	}
	.m_checkbox{
		width:20px;
		height:20px;
		border:5px solid rgba(0, 255, 0, .5);
		border-right-width:2px;
		border-bottom-width:2px;
		position:absolute;
		top:5px;
		right:5px;

	}
	.m_selected{
		position:absolute;
		top:5px;
		right:5px;
		width:25px;
		height:25px;
		background: no-repeat url();
		background-size: 100%;
	}
}

/**
 * 宫格形式的列表布局。使 li.float 为 left.
 */
.grid(@itemWidth:33.3%){
	margin :			0 auto;
	padding :         	0;
	width :				100%;
	li{
		float :		 	left;
		overflow :		hidden;
		cursor : 		pointer;
		padding: 2px 0; /* 让图片显示阴影的效果 */
		width: @itemWidth;
		.imgContainer{	/* 图片容器 */
			margin : 		0 auto;  
			/*      display: inline-block;
			width: 100%;
			height: 100%;
			font-size: 0; */
			text-align :	  center; /* 当不设100%宽度的时候，采用居中的方式 */

			img{
				width: 100%; 
				max-height: 100%;
				margin: 0;
				padding: 0;
				vertical-align: top!important;
		    }
		}
	    h2{
	    	font-size: 10.5pt;
	    }
	}
}

 


// 滑动条
.slider{
	position: relative;
	width:85%;
	height: 5px;
	border:1px solid gray;
	margin:15px auto;
	cursor: pointer;
	button.withAnimated{
		.trans(left 300ms ease);
	}
	button{
		position: absolute;
		height:16px;
		width:16px;
		background-color: gray;
		bottom:-110%;
		.resetBtn;
	}
}

.red{ 
	border:1px solid #d00!important; 
	background:#ffe9e8!important;
	color:#d00;
}

.scrollTab{
	overflow:hidden;
 	position:relative; 
	&>div{ // mover
		white-space: nowrap;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		position:absolute;
		.leftFx;
		&>div{
			white-space: nowrap;
			float:left;
		}
	}
}

.tabBtns{
	li{
		float:left;
		text-align:center;
		cursor:pointer;
	}
}